<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta charset="utf-8" name="viewport" content="width=640,user-scalable=no">
		<title>我的订单</title>
		<script type="text/javascript" src="js/vue.js"></script>
		<link rel="stylesheet" type="text/css" href="css/我的订单.css"/>
	</head>
	<body>
		<div id="app">
			<div id="hjm_tab">
				<div id="hjm_tab_b1">
					<div @click="apen()" id="bordernone">全部</div>
				</div>
				<div id="hjm_tab_b2">
					<div @click="dpen()">订单生成</div>
				</div>
				<div id="hjm_tab_b3">
					<div @click="open()">未付款</div>
				</div>
			</div>
			
			<div id="hjm_neirong" >
				<div id="hjm_neirong_box1" v-for="(item,index) in text" :key="index">
					<img :src="item.img" >
					<span>{{item.d1}}</span>
					<span>{{item.zhuangtai1}}</span>
					<span>{{item.d2}}</span>
					<span>{{item.d3}}</span>
				</div>
				<a href="个人中心.html"><div id="hjm_fanhui">返回</div></a>
			</div>
			<div id="hjm_neirong2" >
				<div id="hjm_neirong_box1" v-for="(item,index) in text2" :key="index">
					<img :src="item.img" >
					<span>{{item.d1}}</span>
					<span>{{item.zhuangtai2}}</span>
					<span>{{item.d2}}</span>
					<span>{{item.d3}}</span>
				</div>
				<a href="个人中心.html"><div id="hjm_fanhui">返回</div></a>
			</div>
			<div id="hjm_neirong3" >
				<div id="hjm_neirong_box1" v-for="(item,index) in text3" :key="index">
					<img :src="item.img" >
					<span>{{item.d1}}</span>
					<span>{{item.zhuangtai}}</span>
					<span>{{item.d2}}</span>
					<span>{{item.d3}}</span>
				</div>
				<a href="个人中心.html"><div id="hjm_fanhui">返回</div></a>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		new Vue({
			el:"#app",
			data:{
				text:[
					{
						zhuangtai1:'状态：订单生成',
						d1:'订单：2015011214330901735078',
						d2:'价格：￥1201',
						d3:'时间：2022-05-13 23：24：30',
						img:'img/sc_11_1.jpg',
					},
					{
						zhuangtai1:'状态：订单生成',
						d1:'订单：2016483464135464168413',
						d2:'价格：￥1800',
						d3:'时间：2022-06-20 15：35：45',
						img:'img/sc_12_1.jpg',
					},
					{
						zhuangtai1:'状态：订单生成',
						d1:'订单：2016464416413468464361',
						d2:'价格：￥1064',
						d3:'时间：2022-07-22 10：45：36',
						img:'img/sc_4_img.jpg',
					},
				],
				text2:[
					{
						zhuangtai2:'状态：未付款',
						d1:'订单：2015011214330901735078',
						d2:'价格：￥999',
						d3:'时间：2022-02-23 13：22：30',
						img:'img/主图3.jpg',
					},
					{
						zhuangtai2:'状态：未付款',
						d1:'订单：2016483464135464168413',
						d2:'价格：￥666',
						d3:'时间：2022-04-30 11：25：55',
						img:'img/主图2.png',
					},
					
				],
				text3:[
					{
						zhuangtai:'状态：未付款',
						d1:'订单：2015011214330901735078',
						d2:'价格：￥999',
						d3:'时间：2022-02-23 13：22：30',
						img:'img/主图3.jpg',
					},
					{
						zhuangtai:'状态：未付款',
						d1:'订单：2016483464135464168413',
						d2:'价格：￥666',
						d3:'时间：2022-04-30 11：25：55',
						img:'img/主图2.png',
					},
					{
						zhuangtai:'状态：订单生成',
						d1:'订单：2015011214330901735078',
						d2:'价格：￥1201',
						d3:'时间：2022-05-13 23：24：30',
						img:'img/sc_11_1.jpg',
					},
					{
						zhuangtai:'状态：订单生成',
						d1:'订单：2016483464135464168413',
						d2:'价格：￥1800',
						d3:'时间：2022-06-20 15：35：45',
						img:'img/sc_12_1.jpg',
					},
					{
						zhuangtai:'状态：订单生成',
						d1:'订单：2016464416413468464361',
						d2:'价格：￥1064',
						d3:'时间：2022-07-22 10：45：36',
						img:'img/sc_4_img.jpg',
					},
				],
			},
			methods:{
				open(){
					var hjm_neirong = document.getElementById('hjm_neirong');
					var hjm_neirong2 = document.getElementById('hjm_neirong2');
					var hjm_neirong3 = document.getElementById('hjm_neirong3');
					var bordernone = document.getElementById('bordernone');
					hjm_neirong.style.display='none';
					hjm_neirong2.style.display='block';
					hjm_neirong3.style.display='none';
					bordernone.style.border = 0;
					bordernone.style.color = 'black';
				},
				apen(){
					var hjm_neirong = document.getElementById('hjm_neirong');
					var hjm_neirong2 = document.getElementById('hjm_neirong2');
					var hjm_neirong3 = document.getElementById('hjm_neirong3');
					var bordernone = document.getElementById('bordernone');
					hjm_neirong.style.display='none';
					hjm_neirong2.style.display='none';
					hjm_neirong3.style.display='block';
					bordernone.style.borderBottom='5px solid #D40000';
					bordernone.style.color = 'red';
				},
				dpen(){
					var hjm_neirong = document.getElementById('hjm_neirong');
					var hjm_neirong2 = document.getElementById('hjm_neirong2');
					var hjm_neirong3 = document.getElementById('hjm_neirong3');
					var bordernone = document.getElementById('bordernone');
					hjm_neirong.style.display='block';
					hjm_neirong2.style.display='none';
					hjm_neirong3.style.display='none';
					bordernone.style.border = 0;
					bordernone.style.color = 'black';
				}
			}
		})
	</script>
</html>
